.xs-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  &__ {
    &left {
      display: flex;
      flex-direction: column;
      gap: 7px;
      flex: 3;
      &- {
        &title {
          font-size: 17px;
          color: #454242;
        }

        &user {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: small;
          color: #a6a3a3;

          img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
          }
        }

        &desc {
          color: #777373;
          font-size: 14px;
        }

        &date {
          color: #a6a3a3;
          font-size: 13px;
        }
      }
    }

    &right {
      width: 100px;
      height: 100px;

      flex: 1;
      img {
        // 宽高是动态的，所以不能设置固定值，否则图片会变形，要裁切
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
